

<template>
<!--  <div class="attraction-tour" >-->
<!--    &lt;!&ndash;            头像&ndash;&gt;-->
<!--    <div style="margin-right: 14px;">-->
<!--      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>-->
<!--    </div>-->
<!--    &lt;!&ndash;            右侧对话框&ndash;&gt;-->
<!--    <div class="input-bottom-dialogue-container">-->

<!--      <div class="input-bottom-dialogue-container-box">-->
<!--        <div class="input-tip-title">-->
<!--          <div class="tip">-->
<!--            <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">-->
<!--          </div>-->
<!--          <div class="title">总体介绍</div>-->
<!--        </div>-->
<!--        <div class="culture-AI">-->
<!--          <div class="culture-left">-->
<!--            <div>-->
<!--              <div class="culture-container-title">文字介绍</div>-->
<!--              <div class="culture-container">-->
<!--                {{attractionTour}}-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="culture-right">-->
<!--            <div>-->
<!--              <div class="culture-container-title">音频介绍</div>-->
<!--              <div class="culture-container-video">-->
<!--                <div>-->
<!--                  &lt;!&ndash;                  显示&ndash;&gt;-->

<!--                  <audio  id="audio" :src="audioSrc" controls>-->

<!--                  </audio>-->

<!--                </div>-->
<!--&lt;!&ndash;                <div>&ndash;&gt;-->
<!--&lt;!&ndash;                  <img style="width: 100px;height: 100px" src="@/assets/images/notLoggedIn/play@2x.png">&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
  <div class="input-bottom-culture specifics" >
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">

      <div class="input-bottom-dialogue-container-box">
        <div class="input-tip-title">
          <div class="tip">
            <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
          </div>
          <div class="title">场景漫游:</div>
        </div>

      </div>
    </div>
  </div>
</template>
<script setup>
import api from "@/service/TouristHomepage";
import {ref} from "vue";
const props = defineProps({
  selectCulturePlace: {
    type: Object,
    default: () => {
      return {}
    }
  },
  selectCultureInfo: {
    type: Object,
    default: () => {
      return {}
    }
  },
  currentVoice: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const attractionTour=ref('')
const audioSrc=ref("")
function getInfoByKeywordApi(){
  if(props.selectCulturePlace.landmarkName && props.selectCultureInfo.name) {
    let prarms = {
      place: props.selectCulturePlace.landmarkName,
      info: props.selectCultureInfo.name,
    }
    api.getInfoByKeyword(prarms).then((res) => {
      console.log("getInfoByKeyword", res)
      attractionTour.value = res.data.answer;
      audioSrc.value = res.data.audio_path;
    })
  }
}
// 监听
watch(() => props.currentVoice, (newValue, oldValue) => {
  // 判断props.currentVoice对象是否为空
  if(Object.keys(props.currentVoice).length!==0){
    attractionTour.value = props.currentVoice.answer;
    audioSrc.value = props.currentVoice.audio_path;
  }else {
    getInfoByKeywordApi()

  }
})
onMounted(() => {
  // 判断props.currentVoice对象是否为空
  if(Object.keys(props.currentVoice).length!==0){
    attractionTour.value = props.currentVoice.answer;
    audioSrc.value = props.currentVoice.audio_path;
  }else {
    getInfoByKeywordApi()

  }

});
</script>
<style scoped lang="scss">
.attraction-tour{
  margin: 20px 0;
  display: flex;
  .input-bottom-dialogue-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 286px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);

    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .input-tip-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .culture-AI{
        height: 210px;
        display: flex;
        .culture-left{
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container{
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
        .culture-right{
          margin-left: 40px;
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-video{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
      }
    }


  }
}
.input-bottom-culture{
  margin-top: 20px;

  display: flex;
  .input-bottom-dialogue-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 286px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);

    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .input-tip-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }


  }
}
</style>